<template>
  <div class="content-wrapper">
    <div class="content-header">
      <el-page-header @back="goBack" :content="this.temp.repositoryName">
      </el-page-header>
    </div>
    <div class="content-container">
      <div class="filter-container">
        <el-tabs tab-position="left" style="height: 100%">
          <el-tab-pane label="信息设置">
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span>知识库信息</span>
              </div>
              <div class="text item">
                <el-form
                  label-width="80px"
                  ref="dataForm"
                  :rules="rules"
                  :model="temp"
                >
                  <el-form-item label="名称" prop="repositoryName">
                    <el-input v-model.trim="temp.repositoryName"></el-input>
                  </el-form-item>
                  <el-form-item label="简介" prop="memo">
                    <el-input
                      v-model="temp.memo"
                      maxlength="200"
                      type="textarea"
                    ></el-input>
                  </el-form-item>
                  <el-form-item>
                    <el-button
                      size="medium"
                      type="primary"
                      plain
                      @click="saveRepository"
                      >修改</el-button
                    >
                  </el-form-item>
                </el-form>
              </div>
            </el-card>

            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span>删除知识库</span>
              </div>
              <div class="text">
                <span>将这个知识库彻底删除，知识库下的所有数据将会删除</span
                ><br />
                <el-button
                  class="box-but"
                  size="medium"
                  @click="deleteRepository"
                  >删除</el-button
                >
              </div>
            </el-card>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>

    <!--删除按钮对话框-->
    <el-dialog
      class="dialog"
      width="30%"
      :visible.sync="deleteDialog"
      :before-close="deleteDialogClose"
      title="删除知识库"
    >
      <div class="text me_item">
        <div class="dialogDody">
          正在删除知识库 《{{
            temp.repositoryName
          }}》，该操作不可逆，一旦操作成功，知识库下的所有内容将会删除。请输入下面内容再次确认操作。
        </div>

        <p style="margin-top: 20px">
          请在下方输入"{{ temp.repositoryName }}"已确认操作
        </p>

        <el-input
          size="medium"
          v-model="deleteRepositoryName"
          :placeholder="temp.repositoryName"
        ></el-input>
        <span v-if="!deleteError" class="deleteError"
          >输入的知识库名称错误, 请重新输入</span
        >
      </div>
      <div class="but">
        <el-button size="medium" @click="deleteDialog = false">取消</el-button>
        <el-button size="medium" @click="deleteButton">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getRepository,
  deleteRepository,
  updateRepository,
  listRepositoryMemberPermissions
} from '@/api/fd/repository'

export default {
  name: 'index',
  data() {
    return {
      visible: false,
      permissionVal: [],
      deleteError: true,
      deleteRepositoryName: '',
      deleteDialog: false,
      permissionResources: null,
      temp: {
        repositoryId: null,
        belongType: 0,
        belongTo: null,
        repositoryName: null
      },
      belongType: '',
      rules: {
        repositoryName: [
          { required: true, message: '知识库名称不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  mounted() {
    if (this.$route.params.repositoryId) {
      listRepositoryMemberPermissions().then((res) => {
        this.permissionResources = res.data
        this.getRepository(this.$route.params.repositoryId)
      })
    }
  },
  methods: {
    handleVisibleChange(val) {
      console.log(this.visible)
      if (!this.visible) {
        this.permissionVal.length = 0
      }
    },
    handlePermissionChange(val) {
      //复选框时勾选触发
      var num = 1
      this.permissionVal.forEach((item) => {
        num += item
      })
      this.temp.permission = num
      console.log(this.temp.permission)
    },
    updateRepository() {
      //权限的修改
      updateRepository(this.temp).then((res) => {
        this.$message.success('修改成功')
      })
    },
    /**
     * 判断是否有权限
     * @param permission
     * @param item
     * @returns {boolean}
     */
    hasPermission(permission, item) {
      return (permission & item) == item
    },
    deleteButton() {
      //删除按钮触发事件
      if (this.deleteRepositoryName == this.temp.repositoryName) {
        this.deleteError = true
        deleteRepository({ repositoryId: this.temp.repositoryId }).then(
          (res) => {
            this.$message.success('删除成功')
            this.$router.go(-1)
          }
        )
      } else {
        this.deleteError = false
      }
    },
    deleteDialogClose() {
      //删除对话框关闭时触发
      this.deleteRepositoryName = ''
      this.deleteDialog = false
    },
    deleteRepository() {
      this.deleteDialog = true
    },
    getRepository(id) {
      getRepository({ repositoryId: id }).then((res) => {
        if (res.data == null) {
          this.$message.info('未查询到当前知识库信息，返回主页')
          this.$router.push('/dashboard')
        }
        this.temp = res.data
      })
    },
    goBack() {
      this.$router.go(-1)
    },
    // 保存
    saveRepository() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          let data = {
            belongTo: this.temp.belongTo,
            belongType: this.temp.belongType,
            memo: this.temp.memo,
            permission: this.temp.permission,
            repositoryId: this.temp.repositoryId,
            repositoryName: this.temp.repositoryName
          }
          updateRepository(data).then((res) => {
            if (res.code === 1) {
              this.$message({
                message: '修改成功',
                type: 'success'
              })
            }
          })
        }
      })
    }
  }
}
</script>

<style scoped lang='scss'>
.box-card {
  height: 300px;
  margin-top: 10px;
  .box-but {
    margin-top: 30px;
    color: red;
  }
}
.me_item {
  .dialogDody {
    border: #ffe53c solid 1px;
    padding: 20px;
    border-radius: 10px;
    background-color: #fffbcf;
  }

  .deleteError {
    font-size: 12px;
    color: red;
  }
}

.but {
  width: 100%;
  margin-top: 10px;
  text-align: right;
}
</style>
